<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
      <el-tab-pane label="全部" name="0">
        <el-table :data="todoList"
                  border stripe :cell-style="{ 'textAlign': 'center' }"
                  height="calc(100vh - 300px)"
                  overflow-y="auto"
                  :header-cell-style="{ 'color': '#666', 'textAlign': 'center' }"
        >
          <el-table-column prop="templateName" label="模板名称"></el-table-column>
          <el-table-column prop="assignName" label="门店名称"></el-table-column>
          <el-table-column prop="patrolUserName" label="巡查人"></el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
          <el-table-column label="操作">
            <template v-slot:default="scope">
              <el-link icon="el-icon-search" v-if="scope.row.isCorrection==1||scope.row.isCorrection==2"
                       @click="checkTodo(scope.row)"></el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="待整改" name="1">
        <el-table :data="todoList"
                  border stripe :cell-style="{ 'textAlign': 'center' }"
                  height="calc(100vh - 300px)"
                  overflow-y="auto"
                  :header-cell-style="{ 'color': '#666', 'textAlign': 'center' }"
        >
          <el-table-column prop="templateName" label="模板名称"></el-table-column>
          <el-table-column prop="assignName" label="门店名称"></el-table-column>
          <el-table-column prop="patrolUserName" label="巡查人"></el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
          <el-table-column label="操作">
            <template v-slot:default="scope">
              <el-link icon="el-icon-search" v-if="scope.row.isCorrection==1||scope.row.isCorrection==2"
                       @click="checkTodo(scope.row)"></el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="待审批" name="2">
        <el-table :data="todoList"
                  border stripe :cell-style="{ 'textAlign': 'center' }"
                  height="calc(100vh - 300px)"
                  overflow-y="auto"
                  :header-cell-style="{ 'color': '#666', 'textAlign': 'center' }"
        >
          <el-table-column prop="templateName" label="模板名称"></el-table-column>
          <el-table-column prop="assignName" label="门店名称"></el-table-column>
          <el-table-column prop="patrolUserName" label="巡查人"></el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
          <el-table-column label="操作">
            <template v-slot:default="scope">
              <el-link icon="el-icon-search" v-if="scope.row.isCorrection==1||scope.row.isCorrection==2"
                       @click="checkTodo(scope.row)"></el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已完成" name="3">
        <el-table :data="todoList"
                  border stripe :cell-style="{ 'textAlign': 'center' }"
                  height="calc(100vh - 300px)"
                  overflow-y="auto"
                  :header-cell-style="{ 'color': '#666', 'textAlign': 'center' }"
        >
          <el-table-column prop="templateName" label="模板名称"></el-table-column>
          <el-table-column prop="assignName" label="门店名称"></el-table-column>
          <el-table-column prop="patrolUserName" label="巡查人"></el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
          <el-table-column label="操作">
            <template v-slot:default="scope">
              <el-link icon="el-icon-search" v-if="scope.row.isCorrection==1||scope.row.isCorrection==2"
                       @click="checkTodo(scope.row)"></el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-pagination style="padding: 20px 0;" align="right" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 30, 40, 50]"
                     layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-tabs>
    <el-dialog :visible.sync="show" top="10px">
      <el-table :data="optionData"
                v-if="optionData.length!=0"
                border stripe :cell-style="{ 'textAlign': 'center' }"
                height="500px"
                overflow-y="auto"
                :header-cell-style="{ 'color': '#666', 'textAlign': 'center' }"
      >
        <el-table-column prop="problemName" label="问题名称"></el-table-column>
        <el-table-column prop="problemScore" label="分数"></el-table-column>
        <el-table-column prop="patrolUserName" label="巡查人"></el-table-column>
        <el-table-column label="驳回原因">
          <template v-slot:default="scope">
            <el-link style="color: #3A93FF;text-decoration: underline;font-size: 12px"
                     v-if="scope.row.rejectList.length!=0" @click="open(scope.row)">查看
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="" label="截图">
          <template v-slot:default="scope">
            <el-image :src="'https://'+item" v-for="(item,index) in scope.row.correctionImg" :key="index" style="width: 80px"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="操作" v-if="todoDetial.isCorrection==2">
          <template v-slot:default="scope">
            <el-button size="small" style="background-color:#67c23a;color: #eeeeee" @click="_audit(scope.row,1)">通过
            </el-button>
            <el-button size="small" style="background-color:#F56C6C;color: #eeeeee" @click="reject(scope.row)">驳回
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog :visible.sync="visible" append-to-body width="20%">
      <p>驳回原因：</p>
      <el-input size="small" style="width:350px;margin-top: 10px" type="textarea" placeholder="请填写驳回原因"
                v-model="rejectRemark"></el-input>
      <span slot="footer">
          <el-button size="small" style="background-color:#303e9d;color: #eeeeee" @click="visible=false">取消</el-button>
            <el-button size="small" style="background-color:#F56C6C;color: #eeeeee"
                       @click="_audit(todoDetial,2)">确认驳回</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {mapState} from "vuex";
import {EventBus} from "../../utils/eventBus";

export default {
  name: "pendingTodo",
  data() {
    return {
      activeName: '0',
      rejectRemark: '',
      pageNumber: 1,
      pageSize: 20,
      todoList: [],
      optionData: [],
      todoDetial: {},
      total: 0,
      show: false,
      visible: false,
      currentPage: 1,
    }
  },
  computed: {
    ...mapState(["userData"]),
  },
  watch: {
    '$route.query': {
      handler(newQuery) {
        if (this.$route.path === '/pendingTodo') {
          this.fetchUser(newQuery)
        }
      },
      immediate: true
    }
  },
  methods: {
    open(val) {
      this.$alert(`${val.rejectList}`, '驳回原因', {
        showConfirmButton:false,
        callback: action => {
          // this.$message({
          //   type: 'info',
          //   message: `action: ${ action }`
          // });
        }
      });
    },
    reject(row) {
      this.visible = true
      this.todoDetial = row
    },
    _audit(row, val) {
      const data = {
        recordDetailsId: row.recordDetailsId,
        correctionId: row.correctionId,
        examineState: val,
        rejectRemark: this.rejectRemark,
        last: 1
      }
      if (val == 1) delete data.rejectRemark
      if (this.optionData.length > 1) delete data.last
      this.$api.patrolUpdateIsCorrection(data).then(res => {
        if (res == 1) {
          this.$message.success('审核完成！')
          this.getProblem()
          this.visible = false
          EventBus.$emit('dataLoaded')
        }
      })
    },
    fetchUser() {
      this.activeName = '0'
      this.getTodoList()
    },
    handleClick() {
      this.getTodoList()
    },
    getTodoList() {
      const params = {
        pageSize: this.pageSize,
        pageNumber: this.pageNumber,
        flag: this.activeName
      }
      this.$api.patrolGetTodoVo(params).then(res => {
        this.todoList = res.data
      })
    }, handleSizeChange(val) {
      this.pageSize = val
      this.getTodoList()
    },
    handleCurrentChange(val) {
      this.pageNumber = val
      this.getTodoList()
    },
    checkTodo(row) {
      this.show = true
      this.problemDetail = row
      this.getProblem()
    },
    getProblem() {
      const data = {
        patrolRecordId: this.problemDetail.patrolRecordId,
        isCorrection: this.problemDetail.isCorrection
      }
      this.$api.patrolGetRectificationApprovalVo(data).then(res => {
        res.map(el => {
          if (el.correctionImg) {
            if (el.correctionImg.includes(',')) {
              el.correctionImg = el.correctionImg.split(',');
            } else {
              el.correctionImg = [el.correctionImg];
            }
          } else {
            el.correctionImg = [];
          }
        })
        this.optionData = res
      })
    }
  },

}
</script>

<style scoped lang="less">
/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: #ff6a00;
}

/deep/ .el-table .el-table__cell {
  height: 35px;
  line-height: 30px; /* 让内容垂直居中 */
  padding: 0; /* 可选：去除额外内边距 */
}
</style>